<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行百万客户群经营可视化大屏</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .dashboard {
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 20px;
            gap: 20px;
        }

        .header {
            text-align: center;
            padding: 10px;
        }

        .overview-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .card {
            background-color: rgba(30, 43, 74, 0.8);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .card h3 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #8f9bba;
        }

        .card .number {
            font-size: 24px;
            font-weight: bold;
            color: #00f0ff;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 300px) 400px;
            gap: 20px;
            flex-grow: 1;
        }

        .chart-wrapper {
            background-color: rgba(30, 43, 74, 0.8);
            border-radius: 10px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
        }

        .chart-title {
            font-size: 16px;
            color: #fff;
            margin-bottom: 10px;
        }

        .chart {
            flex-grow: 1;
            width: 100%;
            height: 100%;
        }

        .full-width {
            grid-column: 1 / -1;
        }

        .update-time {
            color: #8f9bba;
            font-size: 14px;
            margin-top: 5px;
        }

        @media (max-width: 1200px) {
            .overview-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .charts-container {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(5, 300px);
            }

            .full-width {
                grid-column: auto;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>银行百万客户群经营可视化大屏</h1>
            <div class="update-time">更新时间：<span id="updateTime"></span></div>
        </div>

        <div class="overview-cards">
            <div class="card" id="totalCustomers">
                <h3>总客户数</h3>
                <div class="number">-</div>
            </div>
            <div class="card" id="totalAssets">
                <h3>总资产规模</h3>
                <div class="number">-</div>
            </div>
            <div class="card" id="activeUsers">
                <h3>月活用户数</h3>
                <div class="number">-</div>
            </div>
            <div class="card" id="marketingResponse">
                <h3>营销响应率</h3>
                <div class="number">-</div>
            </div>
        </div>

        <div class="charts-container">
            <div class="chart-wrapper">
                <!-- <div class="chart-title">客户年龄分布</div> -->
                <div id="customerDistribution" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <!-- <div class="chart-title">客户登录持续时间分布</div> -->
                <div id="loginHeatmap" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <!-- <div class="chart-title">产品持有情况分析</div> -->
                <div id="productHoldings" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <!-- <div class="chart-title"><strong>营销效果月度趋势</strong></div> -->
                <div id="marketingTrend" class="chart"></div>
            </div>
            <div class="chart-wrapper full-width">
                <!-- <div class="chart-title">客户资产提升趋势</div> -->
                <div id="assetGrowth" class="chart"></div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/dashboard2.js') }}"></script>
</body>
</html>
